<template>
  <div class="app-container" :class="currentLayout">
    <!-- 布局切换按钮 -->
    <div class="layout-switcher">
      <button :class="['layout-btn', { active: currentLayout === 'layout-small' }]" @click="changeLayout('layout-small')">小屏</button>
      <button :class="['layout-btn', { active: currentLayout === 'layout-medium' }]" @click="changeLayout('layout-medium')">大屏</button>
      <button :class="['layout-btn', { active: currentLayout === 'layout-large' }]" @click="changeLayout('layout-large')">超大屏</button>
    </div>
    <div class="main-layout">
      <!-- 上部分 -->
      <div class="upper-section">
        <!-- 左列 -->
        <div class="column left-column">
          <!-- 个人信息 -->
          <div class="card upper-card">
            <div class="section-title">个人信息</div>
            <div class="upper-card-content">
              <!-- 左侧：现有个人信息 -->
              <div class="personal-info-section">
                <div class="text-sm name-section">
                  <p class="full-name">{{ dataInfo.realName }} <span class="gender-tag">{{ dataInfo.sex == 1 ? '女' : '男' }}</span></p>
                </div>
                <div class="info-grid">
                  <div class="info-item">
                    <p class="value">{{ dataInfo.height||'-' }}cm</p>
                    <p class="unit">身高</p>
                  </div>
                  <div class="info-item">
                    <p class="value">{{ dataInfo.weight||'-' }}kg</p>
                    <p class="unit">体重</p>
                  </div>
                  <div class="info-item">
                    <p class="value">{{ dataInfo.weight?(dataInfo.weight / Math.pow(dataInfo.height / 100, 2)).toFixed(2):'-' }}kg/m</p>
                    <p class="unit">BMI指数</p>
                  </div>
                  <div class="info-item">
                    <p class="value">{{ dataInfo.birthDate?calculateAge(dataInfo.birthDate):'-' }}</p>
                    <p class="unit">年龄</p>
                  </div>
                </div>
              </div>

              <!-- 右侧：健康评分和分析结果 -->
              <div class="health-score-section">
                <!-- 更多按钮下拉菜单 -->
                <div class="more-btn-container">
                  <button class="more-btn">
                    更多操作
                  </button>
                  <div class="more-dropdown">
                    <button class="dropdown-btn" @click="jumpToDetailPage">
                      详情
                    </button>
                    <button class="dropdown-btn" @click="jumpToAI">
                      健康助手
                    </button>
                  </div>
                </div>

                <div class="health-score-card">
                  <div class="water-container">
                    <div class="water" :style="{ '--water-level': healthScore + '%' }"></div>
                  </div>
                  <div class="score-content">
                    <div class="score-number">{{ healthScore }}</div>
                    <div class="score-label">健康评分</div>
                  </div>
                </div>
                <div class="analysis-result">
                  <p class="analysis-text">整体舌象结果：{{szResult.sx}}</p>
                  <p class="analysis-text">整体脉象结果：{{szResult.mx}}</p>
                </div>
              </div>
            </div>
          </div>

          <!-- 数据展示 -->
          <div class="card lower-card">
            <div class="section-title">数据展示</div>
            <div class="data-grid">
              <div class="data-item">
                <div class="gauge-container">
                  <div class="gauge-header">
                    <div class="gauge-title">心率</div>
                    <div class="gauge-value">{{ heartRate }}</div>
                    <div class="gauge-unit">次/分</div>
                  </div>
                  <div class="gauge-wrapper">
                    <div class="gauge-labels">
                      <span>0</span>
                      <span>50</span>
                      <span>100</span>
                      <span>150</span>
                      <span>200</span>
                    </div>
                    <div class="gauge-track">
                      <div class="gauge-fill normal" :style="{ width: '40%' }"></div>
                      <div class="gauge-fill warning" :style="{ width: '20%' }"></div>
                      <div class="gauge-fill danger" :style="{ width: '40%' }"></div>
                      <div class="gauge-marker" :style="{ left: heartRatePosition + '%' }"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="data-item">
                <div class="gauge-container">
                  <div class="gauge-header">
                    <div class="gauge-title">血氧</div>
                    <div class="gauge-value">{{ oxygen }}</div>
                    <div class="gauge-unit">%</div>
                  </div>
                  <div class="gauge-wrapper">
                    <div class="gauge-labels">
                      <span>80</span>
                      <span>85</span>
                      <span>90</span>
                      <span>95</span>
                      <span>100</span>
                    </div>
                    <div class="gauge-track">
                      <div class="gauge-fill danger" :style="{ width: '20%' }"></div>
                      <div class="gauge-fill warning" :style="{ width: '20%' }"></div>
                      <div class="gauge-fill normal" :style="{ width: '60%' }"></div>
                      <div class="gauge-marker" :style="{ left: oxygenPosition + '%' }"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="data-item">
                <div class="gauge-container">
                  <div class="gauge-header">
                    <div class="gauge-title">呼吸</div>
                    <div class="gauge-value">{{ breathRate }}</div>
                    <div class="gauge-unit">次/分</div>
                  </div>
                  <div class="gauge-wrapper">
                    <div class="gauge-labels">
                      <span>0</span>
                      <span>10</span>
                      <span>20</span>
                      <span>30</span>
                      <span>40</span>
                    </div>
                    <div class="gauge-track">
                      <div class="gauge-fill normal" :style="{ width: '37.5%' }"></div>
                      <div class="gauge-fill warning" :style="{ width: '12.5%' }"></div>
                      <div class="gauge-fill danger" :style="{ width: '50%' }"></div>
                      <div class="gauge-marker" :style="{ left: breathRatePosition + '%' }"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="data-item">
                <div class="gauge-container">
                  <div class="gauge-header">
                    <div class="gauge-title">血糖</div>
                    <div class="gauge-value">{{ glucose }}</div>
                    <div class="gauge-unit">mmol/L</div>
                  </div>
                  <div class="gauge-wrapper">
                    <div class="gauge-labels">
                      <span>0</span>
                      <span>5</span>
                      <span>10</span>
                      <span>15</span>
                      <span>20</span>
                    </div>
                    <div class="gauge-track">
                      <div class="gauge-fill normal" :style="{ width: '31%' }"></div>
                      <div class="gauge-fill warning" :style="{ width: '20%' }"></div>
                      <div class="gauge-fill danger" :style="{ width: '49%' }"></div>
                      <div class="gauge-marker" :style="{ left: glucosePosition + '%' }"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 中间列 -->
        <div class="column middle-column">
          <!-- 人体图示 -->
          <div class="card full-height-card">
            <div class="section-title">人体图示</div>
            <div class="body-image-container">
              <div class="health-status-container">
                <!-- 上部状态卡片 -->
                <div class="status-card top" :class="getStatusClass('heart')">
                  <div class="status-title">心脏功能</div>
                  <div class="status-value">{{ heartFunctionIndex }}</div>
                  <div class="status-desc">{{ getHeartStatusDesc() }}</div>
                </div>

                <!-- 左侧状态卡片 -->
                <div class="status-card left" :class="getStatusClass('liver')">
                  <div class="status-title">肝脏功能</div>
                  <div class="status-value">{{ liverFunctionIndex }}</div>
                  <div class="status-desc">{{ getLiverStatusDesc() }}</div>
                </div>

                <!-- 右侧状态卡片 -->
                <div class="status-card right" :class="getStatusClass('lungs')">
                  <div class="status-title">肺部功能</div>
                  <div class="status-value">{{ lungFunctionIndex }}</div>
                  <div class="status-desc">{{ getLungsStatusDesc() }}</div>
                </div>

                <!-- 底部状态卡片 -->
                <div class="status-card bottom" :class="getStatusClass('kidney')">
                  <div class="status-title">肾脏功能</div>
                  <div class="status-value">{{ kidneyFunctionIndex }}</div>
                  <div class="status-desc">{{ getKidneyStatusDesc() }}</div>
                </div>

                <!-- 右上状态卡片 -->
                <div class="status-card top-right" :class="getStatusClass('blood')">
                  <div class="status-title">血压</div>
                  <div class="status-value">{{ systolic }}/{{ diastolic }}</div>
                  <div class="status-desc">{{ getBloodPressureDesc() }}</div>
                </div>

                <!-- 右下状态卡片 -->
                <div class="status-card bottom-right" :class="getStatusClass('glucose')">
                  <div class="status-title">血糖</div>
                  <div class="status-value">{{ glucose }}</div>
                  <div class="status-desc">{{ getGlucoseDesc() }}</div>
                </div>

                <!-- 左上状态卡片 -->
                <div class="status-card top-left" :class="getStatusClass('oxygen')">
                  <div class="status-title">血氧</div>
                  <div class="status-value">{{ oxygen }}%</div>
                  <div class="status-desc">{{ getOxygenDesc() }}</div>
                </div>

                <!-- 左下状态卡片 -->
                <div class="status-card bottom-left" :class="getStatusClass('spleen')">
                  <div class="status-title">脾胃功能</div>
                  <div class="status-value">{{ spleenFunctionIndex }}</div>
                  <div class="status-desc">{{ getSpleenStatusDesc() }}</div>
                </div>



                <!-- 人体图示 -->
                <img src="@/assets/gif/body.gif" alt="Human body diagram with highlighted body systems" class="body-image">
              </div>
            </div>
          </div>
        </div>

        <!-- 右列 -->
        <div class="column right-column">
          <!-- 体征数据 -->
          <div class="card upper-card">
            <div class="section-title">体征数据</div>
            <div class="vital-signs-grid">
<!--              <div class="vital-item">
                <p class="value">人体基础评分：{{ healthScore }}</p>
              </div>-->
              <div class="vital-item">
                <div class="gauge-container-small">
                  <div class="gauge-header">
                    <div class="gauge-title-small">收缩压</div>
                    <div class="gauge-value-small" :class="getSystolicClass">{{ systolic }}</div>
                    <div class="gauge-unit-small">mmHg</div>
                  </div>
                  <div class="gauge-wrapper-small">
                    <div class="gauge-labels-small">
                      <span>60</span>
                      <span>100</span>
                      <span>140</span>
                      <span>180</span>
                    </div>
                    <div class="gauge-track-small">
                      <div class="gauge-fill-small low" :style="{ width: '25%' }"></div>
                      <div class="gauge-fill-small normal" :style="{ width: '41.6%' }"></div>
                      <div class="gauge-fill-small high" :style="{ width: '33.4%' }"></div>
                      <div class="gauge-marker-small" :style="{ left: systolicPosition + '%' }"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="vital-item">
                <div class="gauge-container-small">
                  <div class="gauge-header">
                    <div class="gauge-title-small">舒张压</div>
                    <div class="gauge-value-small" :class="getDiastolicClass">{{ diastolic }}</div>
                    <div class="gauge-unit-small">mmHg</div>
                  </div>
                  <div class="gauge-wrapper-small">
                    <div class="gauge-labels-small">
                      <span>40</span>
                      <span>70</span>
                      <span>100</span>
                      <span>130</span>
                    </div>
                    <div class="gauge-track-small">
                      <div class="gauge-fill-small low" :style="{ width: '22.2%' }"></div>
                      <div class="gauge-fill-small normal" :style="{ width: '22.2%' }"></div>
                      <div class="gauge-fill-small high" :style="{ width: '55.6%' }"></div>
                      <div class="gauge-marker-small" :style="{ left: diastolicPosition + '%' }"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 健康指数 -->
          <div class="card lower-card">
            <div class="section-title">健康指数</div>
            <div class="health-index-grid">
              <div class="index-item">
                <span class="index-label">人体机能指数</span>
                <span class="value">{{ organFunctionIndex }}</span>
              </div>
              <div class="index-item">
                <span class="index-label">心脏机能指数</span>
                <span class="value">{{ heartFunctionIndex }}</span>
              </div>
              <div class="index-item">
                <span class="index-label">肝脏机能指数</span>
                <span class="value">{{ liverFunctionIndex }}</span>
              </div>
              <div class="index-item">
                <span class="index-label">脾胃机能指数</span>
                <span class="value">{{ spleenFunctionIndex }}</span>
              </div>
              <div class="index-item">
                <span class="index-label">肺部机能指数</span>
                <span class="value">{{ lungFunctionIndex }}</span>
              </div>
              <div class="index-item">
                <span class="index-label">肾脏机能指数</span>
                <span class="value">{{ kidneyFunctionIndex }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 下部分 -->
      <div class="lower-section">
        <!-- 生命体征 -->
        <div class="card full-width-card">
          <div class="section-title">生命体征</div>
          <div class="vital-chart-container">
            <div class="vital-info">
              <div class="vital-info-item">
                <img src="@/assets/gif/cardiac-big.png" alt="Heart icon" class="vital-icon">
                <div>
                  <div class="value">心率 {{ heartRate }}</div>
                </div>
              </div>
              <div class="vital-info-item">
                <img src="@/assets/gif/lung-big.png" alt="Lungs icon" class="vital-icon">
                <div>
                  <div class="value">呼吸 {{ breathRate }}</div>
                </div>
              </div>
            </div>
            <div class="chart-container">
              <div ref="chart" class="chart"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { detailMixins } from '@/views/customer/health/mixin/detailMixins'
import { getManagement } from '@/api/customer/management'
import {getLastReportInfo} from "@/api/health/healthReport";
import {getConfigKey} from "@/api/system/config";
import {getLastMessageByCustomerId} from "@/api/iot/message";

export default {
  name: 'Detail',
  mixins: [detailMixins],
  data() {
    return {
      healthReportId: null,
      szResult:{sx:'',mx:''},
      customerId: null,
      dataInfo: {},
      heartRate: 60,
      oxygen: 95,
      breathRate: 15,
      glucose: 3.9,
      systolic: 120,    // 收缩压
      diastolic: 70,  // 舒张压
      healthScore: 74,
      organFunctionIndex: 69,
      heartFunctionIndex: 91,
      liverFunctionIndex: 61,
      spleenFunctionIndex: 75,
      lungFunctionIndex: 95,
      kidneyFunctionIndex: 95,
      currentLayout: 'layout-medium', // 默认中屏布局
      // WebSocket连接相关
      websocket: null,
      websocketUrl: process.env.VUE_APP_WEBSOCKET_URL || `ws://${window.location.host}/mqtt`,
      // 定义不同指标对应的主题
      topics: {
        heartRate: `/health/customer/heartRate/${this.customerId}`,
        oxygen: `/health/customer/oxygen/${this.customerId}`,
        breathRate: `/health/customer/breathRate/${this.customerId}`,
        glucose: `/health/customer/glucose/${this.customerId}`,
        bloodPressure: `/health/customer/bloodPressure/${this.customerId}`,
        healthScore: `/health/customer/healthScore/${this.customerId}`,
        organFunction: `/health/customer/organFunction/${this.customerId}`
      }
    }
  },
  computed: {
    heartRatePosition() {
      // 心率范围0-200，70对应35%
      return (this.heartRate / 200) * 100;
    },
    oxygenPosition() {
      // 血氧范围80-100，95对应80%位置（实际是95%）
      return ((this.oxygen - 80) / 20) * 100;
    },
    breathRatePosition() {
      // 呼吸频率范围0-40，15对应37.5%
      // 添加边界检查确保位置不会超出范围
      const rate = Math.min(Math.max(this.breathRate, 0), 40);
      return (rate / 40) * 100;
    },
    glucosePosition() {
      // 血糖范围0-20，3.9对应19.5%
      return (this.glucose / 20) * 100;
    },
    systolicPosition() {
      // 收缩压范围60-180
      if (this.systolic < 60) return 0;
      return ((this.systolic - 60) / 120) * 100;
    },
    diastolicPosition() {
      // 舒张压范围40-130
      if (this.diastolic < 40) return 0;
      return ((this.diastolic - 40) / 90) * 100;
    }
  },
  created() {
    this.customerId = this.$route.params && this.$route.params.customerId
    // 更新topics中的customerId
    this.updateTopics()
    this.getInfo()
    this.getLastReportInfo()
    // 初始化WebSocket连接
    this.initWebSocket()
  },
  beforeDestroy() {
    // 组件销毁前关闭WebSocket连接
    this.closeWebSocket()
  },
  methods: {
    getInfo() {
      const id = this.customerId
      getManagement(id).then(res => {
        this.dataInfo = res.data
      })
    },
    getLastReportInfo(){
      getLastMessageByCustomerId(this.customerId).then(res=>{
        let data=res.data||{}
        this.heartRate = data.heartRate||this.heartRate
        this.oxygen = data.oxygen||this.oxygen
        this.glucose = data.glucose||this.glucose
        this.diastolic = data.diastolic||this.diastolic
        this.systolic = data.systolic||this.systolic
      })
      getLastReportInfo(this.customerId).then(res => {
        this.szResult.sx=res.data.baseEntity.szPushEntity?res.data.baseEntity.szPushEntity.totalTongueFeatureDesc: ''
        this.szResult.mx=res.data.baseEntity.mzPushEntity?res.data.baseEntity.mzPushEntity.totalPulseFeatureDesc:''
        this.healthReportId = res.data.healthReportId
      })
    },
    // 获取状态类别（根据数值决定颜色）
    getStatusClass(type) {
      switch(type) {
        case 'heart':
          return this.heartFunctionIndex >= 80 ? 'normal' : this.heartFunctionIndex >= 60 ? 'warning' : 'danger';
        case 'liver':
          return this.liverFunctionIndex >= 80 ? 'normal' : this.liverFunctionIndex >= 60 ? 'warning' : 'danger';
        case 'lungs':
          return this.lungFunctionIndex >= 80 ? 'normal' : this.lungFunctionIndex >= 60 ? 'warning' : 'danger';
        case 'kidney':
          return this.kidneyFunctionIndex >= 80 ? 'normal' : this.kidneyFunctionIndex >= 60 ? 'warning' : 'danger';
        case 'spleen':
          return this.spleenFunctionIndex >= 80 ? 'normal' : this.spleenFunctionIndex >= 60 ? 'warning' : 'danger';
        case 'blood':
          return (this.systolic >= 90 && this.systolic <= 140 && this.diastolic >= 60 && this.diastolic <= 80) ? 'normal' : 'warning';
        case 'glucose':
          return (this.glucose >= 3.9 && this.glucose <= 6.1) ? 'normal' : 'warning';
        case 'oxygen':
          return this.oxygen >= 95 ? 'normal' : this.oxygen >= 90 ? 'warning' : 'danger';
        default:
          return 'normal';
      }
    },

    // 各器官状态描述
    getHeartStatusDesc() {
      if (this.heartFunctionIndex >= 80) return '心脏功能良好';
      if (this.heartFunctionIndex >= 60) return '心脏功能一般';
      return '心脏功能需要关注';
    },

    getLiverStatusDesc() {
      if (this.liverFunctionIndex >= 80) return '肝脏功能良好';
      if (this.liverFunctionIndex >= 60) return '肝脏功能一般';
      return '肝脏功能需要关注';
    },

    getLungsStatusDesc() {
      if (this.lungFunctionIndex >= 80) return '肺部功能良好';
      if (this.lungFunctionIndex >= 60) return '肺部功能一般';
      return '肺部功能需要关注';
    },

    getKidneyStatusDesc() {
      if (this.kidneyFunctionIndex >= 80) return '肾脏功能良好';
      if (this.kidneyFunctionIndex >= 60) return '肾脏功能一般';
      return '肾脏功能需要关注';
    },

    getSpleenStatusDesc() {
      if (this.spleenFunctionIndex >= 80) return '脾胃功能良好';
      if (this.spleenFunctionIndex >= 60) return '脾胃功能一般';
      return '脾胃功能需要关注';
    },

    getBloodPressureDesc() {
      if (this.systolic >= 90 && this.systolic <= 140 && this.diastolic >= 60 && this.diastolic <= 80) {
        return '血压正常';
      } else if (this.systolic > 140 || this.diastolic > 80) {
        return '血压偏高';
      } else {
        return '血压偏低';
      }
    },

    getGlucoseDesc() {
      if (this.glucose >= 3.9 && this.glucose <= 6.1) {
        return '血糖正常';
      } else if (this.glucose > 6.1) {
        return '血糖偏高';
      } else {
        return '血糖偏低';
      }
    },

    getOxygenDesc() {
      if (this.oxygen >= 95) return '血氧正常';
      if (this.oxygen >= 90) return '血氧偏低';
      return '血氧严重偏低';
    },
    // 切换布局
    changeLayout(layout) {
      this.currentLayout = layout
      // 重新初始化图表以适应新布局
      if (this.myChart) {
        this.$nextTick(() => {
          this.myChart.resize()
        })
      }
    },
    calculateAge(birthDate) {
      const today = new Date()
      const birth = new Date(birthDate)
      let age = today.getFullYear() - birth.getFullYear()
      const monthDifference = today.getMonth() - birth.getMonth()
      if (monthDifference < 0 || (monthDifference === 0 && today.getDate() < birth.getDate())) {
        age--
      }
      return age
    },
    jumpToAI() {
        getConfigKey('sys.AI_Health_Assistant.url').then(res => {
          let url=res.msg
          //http://zhashi.com.cn:3000/chat/share?shareId=9yu8rn9quyaske5yfz9fhhyi
          this.$router.push(`/external/${encodeURIComponent(url)}&${this.customerId}`)

        })
    },
    // 跳转到详细分析报告页面
    jumpToDetailPage() {
      // 这里可以根据实际情况修改跳转路径
      // 如果是Vue项目使用vue-router，可以这样写：
      // this.$router.push('/health/detail-report')

      // 这里使用简单的页面跳转作为示例
      //window.location.href = '/health/detail-report'
      if(this.healthReportId){
        this.$router.push(`/health/healthReport-detailSz/index/${this.customerId}/4/${this.healthReportId}`)
      }
    },
    getSystolicClass() {
      if (this.systolic < 90) return 'low-value';
      if (this.systolic >= 90 && this.systolic <= 140) return 'normal-value';
      return 'high-value';
    },
    getDiastolicClass() {
      if (this.diastolic < 60) return 'low-value';
      if (this.diastolic >= 60 && this.diastolic <= 80) return 'normal-value';
      return 'high-value';
    },
    // 更新主题中的customerId
    updateTopics() {
      this.topics = {
        heartRate: `/health/customer/heartRate/${this.customerId}`,
        oxygen: `/health/customer/oxygen/${this.customerId}`,
        breathRate: `/health/customer/breathRate/${this.customerId}`,
        glucose: `/health/customer/glucose/${this.customerId}`,
        bloodPressure: `/health/customer/bloodPressure/${this.customerId}`,
        healthScore: `/health/customer/healthScore/${this.customerId}`,
        organFunction: `/health/customer/organFunction/${this.customerId}`
      }
    },
    // 初始化WebSocket连接
    initWebSocket() {
      try {
        // 创建MQTT客户端连接
        const clientId = 'mqttjs_' + Math.random().toString(16).substr(2, 8)
        const options = {
          keepalive: 60,
          clientId: clientId,
          username: 'mica',
          password: 'mica',
          protocolId: 'MQTT',
          protocolVersion: 4,
          clean: true,
          reconnectPeriod: 1000,
          connectTimeout: 30 * 1000,
          will: {
            topic: 'WillMsg',
            payload: 'Connection Closed abnormally..!',
            qos: 0,
            retain: false
          }
        }

        // 通过CDN方式加载mqtt库，避免webpack解析错误
        console.log('Connecting mqtt client')
        this.websocket = mqtt.connect(this.websocketUrl, options)

        this.websocket.on('error', (err) => {
          console.log('Connection error: ', err)
          this.websocket.end()
        })

        this.websocket.on('reconnect', () => {
          console.log('Reconnecting...')
        })

        // 成功连接后触发的回调
        this.websocket.on('connect', () => {
          console.log('已经连接成功');
          // 订阅所有相关主题
          const topicList = Object.values(this.topics)
          this.websocket.subscribe(topicList, () => {
            console.log(`已订阅所有健康数据主题:`, topicList)
          })
        });

        // 当客户端收到一个发布过来的消息时触发回调
        /**
         * topic：收到的报文的topic
         * message：收到的数据包的负载playload
         * packet：MQTT 报文信息，其中包含 QoS、retain 等信息
         */
        this.websocket.on('message', (topic, message, packet) =>{
          // 这里有可能拿到的数据格式是Uint8Array格式，可以直接用toString转成字符串
          // let data = JSON.parse(message.toString());
          console.log("获取到的数据：", message)
          console.log("数据对应订阅主题：", topic)
          console.log("获取到的数据包：", packet)
          const jsonString = new TextDecoder().decode(message);

// 将字符串解析为JSON对象
          const jsonObject = JSON.parse(jsonString);
          console.log(jsonObject)
          // 处理实时健康数据
          this.handleMessageByTopic(topic,jsonObject)
        });


        // 连接关闭处理
        this.websocket.on('close', () => {
          console.log('WebSocket连接已关闭')
        })
      } catch (error) {
        console.error('初始化WebSocket连接失败:', error)
      }
    },

    // 根据主题处理消息
    handleMessageByTopic(topic, data) {
      switch (topic) {
        case this.topics.heartRate:
          // 处理心率数据
          if (data.value !== undefined) this.heartRate = data.value
          break

        case this.topics.oxygen:
          // 处理血氧数据
          if (data.value !== undefined) this.oxygen = data.value
          break

        case this.topics.breathRate:
          // 处理呼吸频率数据
          if (data.value !== undefined) this.breathRate = data.value
          break

        case this.topics.glucose:
          // 处理血糖数据
          if (data.value !== undefined) this.glucose = data.value
          break

        case this.topics.bloodPressure:
          // 处理血压数据
          if (data.systolic !== undefined) this.systolic = data.systolic
          if (data.diastolic !== undefined) this.diastolic = data.diastolic
          break

        case this.topics.healthScore:
          // 处理健康评分数据
          if (data.value !== undefined) this.healthScore = data.value
          break

        case this.topics.organFunction:
          // 处理器官功能指数数据
          if (data.organFunctionIndex !== undefined) this.organFunctionIndex = data.organFunctionIndex
          if (data.heartFunctionIndex !== undefined) this.heartFunctionIndex = data.heartFunctionIndex
          if (data.liverFunctionIndex !== undefined) this.liverFunctionIndex = data.liverFunctionIndex
          if (data.spleenFunctionIndex !== undefined) this.spleenFunctionIndex = data.spleenFunctionIndex
          if (data.lungFunctionIndex !== undefined) this.lungFunctionIndex = data.lungFunctionIndex
          if (data.kidneyFunctionIndex !== undefined) this.kidneyFunctionIndex = data.kidneyFunctionIndex
          break

        default:
          console.warn('未知主题:', topic)
      }
    },
    // 关闭WebSocket连接
    closeWebSocket() {
      if (this.websocket) {
        this.websocket.end()
        this.websocket = null
      }
    }
  }
}
</script>
<style scoped>
/* 原有样式 - 从detail.css合并而来 */
.app-container {
  background-color: #0D1B2A;
  color: #FFFFFF;
  font-family: 'Arial', sans-serif;
  height: calc(100vh - 84px);
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.main-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 10px;
  overflow: hidden;
}

.upper-section {
  display: flex;
  flex: 0 0 auto;
  height: 68%;
  gap: 10px;
  min-height: 0;
}

.lower-section {
  flex: 0 0 32%;
  display: flex;
  gap: 10px;
  min-height: 0;
}

.column {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  min-height: 0;
}

.left-column {
  flex: 1;
}

.middle-column {
  flex: 1;
}

.right-column {
  flex: 1;
}

.card {
  background-color: #102A43;
  border-radius: 8px;
  padding: 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.upper-card {
  flex: 1;
  min-height: 0;
}

.lower-card {
  flex: 1;
  min-height: 0;
}

.full-height-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.full-width-card {
  flex: 1;
  height: 100%;
  padding: 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.section-title {
  font-size: 16px;
  text-transform: uppercase;
  color: #50784b;
  margin-bottom: 10px;
  flex: 0 0 auto;
}

.value {
  font-size: 16px;
  color: #69A2B0;
  margin: 3px 0;
}

.unit {
  font-size: 10px;
  margin: 0;
}

.upper-card-content {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.personal-info-section {
  flex: 1;
}

.health-score-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 10px;
  background-color: rgba(80, 120, 75, 0.1);
  border-radius: 8px;
}

/* 更多按钮下拉菜单样式 */
.more-btn-container {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  display: inline-block;
}

.more-btn {
    background: linear-gradient(135deg, #50C878 0%, #50784b 100%);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(80, 200, 120, 0.3);
    min-width: 42px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
  }

.more-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 3px 12px rgba(80, 200, 120, 0.4);
  background: linear-gradient(135deg, #50784b 0%, #50C878 100%);
}



.more-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 5px;
  background-color: #102A43;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  overflow: hidden;
  min-width: 80px;
}

.more-btn-container:hover .more-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-btn {
  background: none;
  color: white;
  border: none;
  padding: 10px 15px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 12px;
}

.dropdown-btn:hover {
  background-color: rgba(80, 200, 120, 0.2);
  transform: translateX(2px);
}

.dropdown-btn:active {
  background-color: rgba(80, 200, 120, 0.3);
}

/* 确保健康评分区域相对定位，使按钮可以绝对定位在其中 */
.health-score-section {
  position: relative;
}

.health-score-card {
  position: relative;
  border: 2px solid #50C878;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #0D1B2A;
  overflow: hidden;
}

.water-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.water {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(80, 194, 120, 0.8) 0%, rgba(80, 120, 75, 0.6) 100%);
  transition: clip-path 1s ease-out;
  animation: water-ripple 8s cubic-bezier(0.25, 0.1, 0.25, 1) infinite alternate;
}

@keyframes water-ripple {
  0% {
    clip-path: polygon(0% 100%, 0% calc(100% - var(--water-level)), 8% calc(100% - var(--water-level) - 1px), 16% calc(100% - var(--water-level) + 1.5px), 25% calc(100% - var(--water-level)), 33% calc(100% - var(--water-level) - 1.5px), 41% calc(100% - var(--water-level) + 1px), 50% calc(100% - var(--water-level)), 58% calc(100% - var(--water-level) - 1px), 66% calc(100% - var(--water-level) + 1.5px), 75% calc(100% - var(--water-level)), 83% calc(100% - var(--water-level) - 1.5px), 91% calc(100% - var(--water-level) + 1px), 100% calc(100% - var(--water-level)), 100% 100%);
  }
  20% {
    clip-path: polygon(0% 100%, 0% calc(100% - var(--water-level) + 1px), 8% calc(100% - var(--water-level)), 16% calc(100% - var(--water-level) - 1.5px), 25% calc(100% - var(--water-level)), 33% calc(100% - var(--water-level) + 1.5px), 41% calc(100% - var(--water-level)), 50% calc(100% - var(--water-level) - 1px), 58% calc(100% - var(--water-level)), 66% calc(100% - var(--water-level) + 1.5px), 75% calc(100% - var(--water-level)), 83% calc(100% - var(--water-level) - 1.5px), 91% calc(100% - var(--water-level)), 100% calc(100% - var(--water-level) + 1px), 100% 100%);
  }
  40% {
    clip-path: polygon(0% 100%, 0% calc(100% - var(--water-level)), 8% calc(100% - var(--water-level) + 1.5px), 16% calc(100% - var(--water-level)), 25% calc(100% - var(--water-level) - 1.5px), 33% calc(100% - var(--water-level)), 41% calc(100% - var(--water-level) + 1.5px), 50% calc(100% - var(--water-level)), 58% calc(100% - var(--water-level) - 1.5px), 66% calc(100% - var(--water-level)), 75% calc(100% - var(--water-level) + 1.5px), 83% calc(100% - var(--water-level)), 91% calc(100% - var(--water-level) - 1.5px), 100% calc(100% - var(--water-level)), 100% 100%);
  }
  60% {
    clip-path: polygon(0% 100%, 0% calc(100% - var(--water-level) - 1px), 8% calc(100% - var(--water-level)), 16% calc(100% - var(--water-level) + 1.5px), 25% calc(100% - var(--water-level)), 33% calc(100% - var(--water-level) - 1.5px), 41% calc(100% - var(--water-level)), 50% calc(100% - var(--water-level) + 1px), 58% calc(100% - var(--water-level)), 66% calc(100% - var(--water-level) - 1.5px), 75% calc(100% - var(--water-level)), 83% calc(100% - var(--water-level) + 1.5px), 91% calc(100% - var(--water-level)), 100% calc(100% - var(--water-level) - 1px), 100% 100%);
  }
  80% {
    clip-path: polygon(0% 100%, 0% calc(100% - var(--water-level)), 8% calc(100% - var(--water-level) - 1.5px), 16% calc(100% - var(--water-level)), 25% calc(100% - var(--water-level) + 1.5px), 33% calc(100% - var(--water-level)), 41% calc(100% - var(--water-level) - 1.5px), 50% calc(100% - var(--water-level)), 58% calc(100% - var(--water-level) + 1.5px), 66% calc(100% - var(--water-level)), 75% calc(100% - var(--water-level) - 1.5px), 83% calc(100% - var(--water-level)), 91% calc(100% - var(--water-level) + 1.5px), 100% calc(100% - var(--water-level)), 100% 100%);
  }
  100% {
    clip-path: polygon(0% 100%, 0% calc(100% - var(--water-level) + 1px), 8% calc(100% - var(--water-level)), 16% calc(100% - var(--water-level) - 1.5px), 25% calc(100% - var(--water-level)), 33% calc(100% - var(--water-level) + 1.5px), 41% calc(100% - var(--water-level)), 50% calc(100% - var(--water-level) - 1px), 58% calc(100% - var(--water-level)), 66% calc(100% - var(--water-level) + 1.5px), 75% calc(100% - var(--water-level)), 83% calc(100% - var(--water-level) - 1.5px), 91% calc(100% - var(--water-level)), 100% calc(100% - var(--water-level) + 1px), 100% 100%);
  }
}

.score-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.analysis-result {
  text-align: center;
  padding: 0 10px;
}

.analysis-text {
  font-size: 12px;
  line-height: 1.5;
  color: #d3dce6;
  margin: 0;
  text-align: left; /* 左对齐 */
}

/* 为舌象和脉象结果添加特殊样式 */
.analysis-text:first-child,
.analysis-text:nth-child(2) {
  font-weight: bold; /* 字体加粗 */
}

/* 小屏布局下的分析文本样式 */
.layout-small .analysis-text {
  font-size: 10px;
}

/* 中屏布局下的分析文本样式 */
.layout-medium .analysis-text {
  font-size: 12px;
}

/* 大屏布局下的分析文本样式 */
.layout-large .analysis-text {
  font-size: 14px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  text-align: center;
  margin-top: 10px;
}

.name-section {
  text-align: center;
  margin-bottom: 10px;
}

.full-name {
  font-size: 18px;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.gender-tag {
  font-size: 14px;
  font-weight: normal;
  padding: 2px 8px;
  background-color: rgba(80, 120, 75, 0.2);
  border-radius: 12px;
}

/* 小屏布局下的姓名和性别样式 */
.layout-small .full-name {
  font-size: 14px;
  gap: 6px;
}

.layout-small .gender-tag {
  font-size: 10px;
  padding: 1px 6px;
}

/* 中屏布局下的姓名和性别样式 */
.layout-medium .full-name {
  font-size: 16px;
  gap: 7px;
}

.layout-medium .gender-tag {
  font-size: 12px;
  padding: 1px 7px;
}

/* 大屏布局下的姓名和性别样式 */
.layout-large .full-name {
  font-size: 20px;
  gap: 9px;
}

.layout-large .gender-tag {
  font-size: 16px;
  padding: 3px 9px;
  background-color: rgba(80, 120, 75, 0.3);
}

.info-item {
  padding: 12px;
  background-color: rgba(80, 120, 75, 0.1);
  border-radius: 6px;
  transition: transform 0.2s ease;
}

.info-item:hover {
  transform: translateY(-2px);
  background-color: rgba(80, 120, 75, 0.2);
}

.info-item .value {
  font-size: 16px;
  margin-bottom: 4px;
}

.info-item .unit {
  font-size: 12px;
}

.data-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  text-align: center;
  flex: 1;
}

.vital-signs-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  text-align: center;
  flex: 1;
  gap: 8px;
}

.health-index-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  flex: 1;
}

.index-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  background-color: rgba(80, 120, 75, 0.2);
  border-radius: 4px;
}

.index-item .index-label {
  flex: 1;
  text-align: left;
}

.index-item .value {
  flex: 0;
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}

.body-image-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 10px;
}

/* 健康状态容器 */
.health-status-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* 状态卡片基础样式 */
.status-card {
  position: absolute;
  background-color: rgba(16, 42, 67, 0.5);
  border-radius: 6px;
  padding: 8px;
  max-width: 120px;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* 卡片位置 */
.status-card.top {
  top: 10%;
  transform: translateY(-100%);
}

.status-card.left {
  left: 10%;
  transform: translateX(-100%);
}

.status-card.right {
  right: 10%;
  transform: translateX(100%);
}

.status-card.bottom {
  bottom: 10%;
  transform: translateY(100%);
}

.status-card.top-left {
  top: 20%;
  left: 15%;
  transform: translate(-100%, -100%);
}

.status-card.top-right {
  top: 20%;
  right: 15%;
  transform: translate(100%, -100%);
}

.status-card.bottom-left {
  bottom: 20%;
  left: 15%;
  transform: translate(-100%, 100%);
}

.status-card.bottom-right {
  bottom: 20%;
  right: 15%;
  transform: translate(100%, 100%);
}

/* 状态卡片颜色 */
.status-card.normal {
  border-color: #50C878;
}

.status-card.warning {
  border-color: #FFD700;
}

.status-card.danger {
  border-color: #FF6347;
}

/* 状态卡片内容 */
.status-title {
  font-size: 12px;
  color: #FFFFFF;
  margin-bottom: 2px;
}

.status-value {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 2px;
}

.status-desc {
  font-size: 10px;
  color: #CCCCCC;
}

/* 状态卡片悬停效果 */
.status-card:hover {
  transform: scale(1.05) !important;
  z-index: 10;
}

/* 中心健康评分 */
.health-score-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(80, 120, 75, 0.8);
  border: 2px solid #50C878;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

.score-number {
  font-size: 24px;
  font-weight: bold;
  color: #FFFFFF;
  margin: 0;
}

.score-label {
  font-size: 12px;
  color: #CCCCCC;
  margin: 0;
}

/* 小屏布局下的评分样式 */
.layout-small .score-number {
  font-size: 18px;
}

.layout-small .score-label {
  font-size: 10px;
}

/* 中屏布局下的评分样式 */
.layout-medium .score-number {
  font-size: 24px;
}

.layout-medium .score-label {
  font-size: 12px;
}

                    /* 针对1080p分辨率的优化 */
@media screen and (min-width: 1600px) and (max-width: 1920px) {
  /* 调整上下部分高度，确保个人信息完整显示 */
  .upper-section {
    height: 68%;
  }

  .lower-section {
    flex: 0 0 32%;
  }

  .status-card {
    max-width: 105px;
    padding: 6px;
    /* 确保卡片不会超出容器边界 */
    box-sizing: border-box;
  }

  /* 调整卡片位置，使用基于容器尺寸的相对位置防止超出边界 */
  .status-card.top {
    top: calc(20% - 10px);
    transform: translateY(-100%);
    left: 50%;
    margin-left: -52.5px;
  }

  .status-card.left {
    left: calc(20% - 10px);
    transform: translateX(-100%);
    top: 50%;
    margin-top: -30px;
  }

  .status-card.right {
    right: calc(20% - 10px);
    transform: translateX(100%);
    top: 50%;
    margin-top: -30px;
  }

  .status-card.bottom {
    bottom: calc(20% - 10px);
    transform: translateY(100%);
    left: 50%;
    margin-left: -52.5px;
  }

  .status-card.top-left {
    top: calc(25% - 10px);
    left: calc(25% - 10px);
    transform: translate(-100%, -100%);
  }

  .status-card.top-right {
    top: calc(25% - 10px);
    right: calc(25% - 10px);
    transform: translate(100%, -100%);
  }

  .status-card.bottom-left {
    bottom: calc(25% - 10px);
    left: calc(25% - 10px);
    transform: translate(-100%, 100%);
  }

  .status-card.bottom-right {
    bottom: calc(25% - 10px);
    right: calc(25% - 10px);
    transform: translate(100%, 100%);
  }
}

/* 布局响应式调整 */
@media screen and (max-width: 1366px) {
  .status-card {
    max-width: 100px;
    padding: 6px;
  }

  .status-title {
    font-size: 10px;
  }

  .status-value {
    font-size: 12px;
  }

  .status-desc {
    font-size: 8px;
  }

  .health-score-center {
    width: 60px;
    height: 60px;
  }

  .score-number {
    font-size: 18px;
  }

  .score-label {
    font-size: 10px;
  }
}

@media screen and (max-width: 768px) {
  .status-card {
    display: none;
  }

  .health-score-center {
    width: 70px;
    height: 70px;
  }
}

/* 大屏布局下的优化 */
.layout-large .status-card {
  max-width: 140px;
  padding: 10px;
}

.layout-large .status-title {
  font-size: 14px;
}

.layout-large .status-value {
  font-size: 18px;
}

.layout-large .status-desc {
  font-size: 12px;
}

.layout-large .health-score-center {
  width: 100px;
  height: 100px;
}

.layout-large .score-number {
  font-size: 30px;
}

.layout-large .score-label {
  font-size: 14px;
}

.body-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  align-self: center;
}

.vital-chart-container {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.vital-info {
  display: flex;
  flex-direction: column;
  width: 120px;
  flex: 0 0 auto;
  justify-content: center;
  gap: 15px;
}

.vital-info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(80, 120, 75, 0.2);
  padding: 8px;
  border-radius: 6px;
}

.vital-icon {
  width: 32px;
  height: 32px;
}

.value {
  font-size: 16px;
  color: #69A2B0;
  margin: 0;
  font-weight: bold;
}

.spacer {
  display: none;
}

.chart-container {
  flex: 1;
  min-height: 0;
  position: relative;
}

.chart {
  width: 100%;
  height: 100%;
  min-height: 120px;
  position: absolute;
  top: 0;
  left: 0;
}

.el-card {
  color: #d3dce6;
  height: 100%;
}

/* Gauge styles */
.gauge-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px;
}

.gauge-container-small {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px;
}

/* 调整标题、数值和单位为水平显示 */
.gauge-header {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-bottom: 4px;
  width: 100%;
}

.gauge-title {
  margin-bottom: 0;
  margin-right: 6px;
}

.gauge-value {
  margin-top: 0;
  margin-right: 4px;
  font-size: 14px;
}

.gauge-unit {
  margin-top: 0;
}

/* 小尺寸组件的水平显示调整 */
.gauge-container-small .gauge-header {
  margin-bottom: 2px;
}

.gauge-title-small {
  margin-bottom: 0;
  margin-right: 4px;
}

.gauge-value-small {
  margin-top: 0;
  margin-right: 3px;
}

.gauge-unit-small {
  margin-top: 0;
}

.gauge-title {
  font-size: 12px;
  margin-bottom: 4px;
}

.gauge-title-small {
  font-size: 10px;
  margin-bottom: 2px;
}

.gauge-wrapper {
  width: 100%;
  position: relative;
  margin-bottom: 4px;
}

.gauge-wrapper-small {
  width: 100%;
  position: relative;
  margin-bottom: 2px;
}

.gauge-labels {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  margin-bottom: 2px;
  padding: 0 1px;
}

.gauge-labels-small {
  display: flex;
  justify-content: space-between;
  font-size: 6px;
  margin-bottom: 1px;
  padding: 0 1px;
}

.gauge-track {
  height: 20px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background-color: #2c3e50;
}

.gauge-track-small {
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  background-color: #2c3e50;
}

.gauge-fill {
  height: 100%;
  float: left;
}

.gauge-fill-small {
  height: 100%;
  float: left;
}

.gauge-fill.normal {
  background-color: #50C878; /* 绿色表示正常 */
}

.gauge-fill.warning {
  background-color: #FFD700; /* 黄色表示警告 */
}

.gauge-fill.danger {
  background-color: #FF6347; /* 红色表示危险 */
}

.gauge-marker {
  position: absolute;
  top: -4px;
  width: 3px;
  height: 28px;
  background-color: #fff;
  transform: translateX(-50%);
  z-index: 10;
}

.gauge-marker-small {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 16px;
  background-color: #fff;
  transform: translateX(-50%);
  z-index: 10;
}

.gauge-value {
  font-size: 14px;
  font-weight: bold;
  margin-top: 2px;
}

.gauge-value-small {
  font-size: 10px;
  font-weight: bold;
  margin-top: 1px;
}

.gauge-unit {
  font-size: 8px;
}

.gauge-unit-small {
  font-size: 6px;
}

.gauge-fill-small.low {
  background-color: #FF6347; /* 红色表示低 */
}

.gauge-fill-small.normal {
  background-color: #50C878; /* 绿色表示正常 */
}

.gauge-fill-small.high {
  background-color: #FF6347; /* 红色表示高 */
}

.low-value {
  color: #FF6347;
}

.normal-value {
  color: #50C878;
}

.high-value {
  color: #FF6347;
}

/* 响应式设计 */
@media screen and (max-width: 1920px) and (max-height: 1080px) {
  .app-container {
    padding: 8px;
    height: calc(100vh - 84px);
  }

  .main-layout {
    gap: 8px;
  }

  .upper-section {
    height: 68%;
    gap: 8px;
  }

  .lower-section {
    gap: 8px;
  }

  .card {
    padding: 10px;
  }

  .section-title {
    font-size: 15px;
    margin-bottom: 8px;
  }

  .value {
    font-size: 15px;
  }

  .info-grid {
    gap: 5px;
  }

  .data-grid {
    gap: 6px;
  }

  .health-index-grid {
    gap: 6px;
  }

  .vital-info {
    width: 110px;
    gap: 12px;
  }

  .vital-icon {
    width: 30px;
    height: 30px;
  }

  .gauge-container {
    padding: 5px;
  }

  .gauge-title {
    font-size: 11px;
    margin-bottom: 3px;
  }

  .gauge-track {
    height: 16px;
  }

  .gauge-marker {
    top: -4px;
    height: 24px;
  }

  .gauge-value {
    font-size: 13px;
    margin-top: 2px;
  }

  .gauge-unit {
    font-size: 7px;
  }

  .chart {
    min-height: 110px;
  }

  .data-item {
    padding: 4px;
  }

  .vital-item {
    padding: 4px;
  }

  .index-item {
    padding: 5px 6px;
  }

  .index-item span:first-child {
    font-size: 11px;
  }

  .index-item .value {
    font-size: 14px;
  }

  .body-image-container {
    padding: 8px;
  }
}

@media screen and (max-width: 1366px) and (max-height: 768px) {
  .app-container {
    padding: 6px;
    height: calc(100vh - 80px);
  }

  .main-layout {
    gap: 6px;
  }

  .upper-section {
    height: 68%;
    gap: 6px;
  }

  .lower-section {
    gap: 6px;
  }

  .card {
    padding: 8px;
  }

  .section-title {
    font-size: 14px;
    margin-bottom: 6px;
  }

  .value {
    font-size: 14px;
  }

  .unit {
    font-size: 9px;
  }

  .info-grid {
    gap: 4px;
  }

  .data-grid {
    gap: 5px;
  }

  .health-index-grid {
    gap: 5px;
  }

  .index-item {
    padding: 4px 6px;
  }

  .index-item span:first-child {
    font-size: 10px;
  }

  .index-item .value {
    font-size: 13px;
  }

  .vital-info {
    width: 100px;
    gap: 10px;
  }

  .vital-icon {
    width: 28px;
    height: 28px;
  }

  .gauge-container {
    padding: 4px;
  }

  .gauge-title {
    font-size: 10px;
    margin-bottom: 2px;
  }

  .gauge-track {
    height: 7px;
  }

  .gauge-marker {
    top: -1px;
    height: 9px;
  }

  .gauge-value {
    font-size: 12px;
    margin-top: 1px;
  }

  .gauge-unit {
    font-size: 7px;
  }

  .gauge-container-small {
    padding: 3px;
  }

  .gauge-title-small {
    font-size: 8px;
    margin-bottom: 1px;
  }

  .gauge-track-small {
    height: 5px;
  }

  .gauge-marker-small {
    top: -1px;
    height: 7px;
  }

  .gauge-value-small {
    font-size: 9px;
    margin-top: 1px;
  }

  .gauge-unit-small {
    font-size: 6px;
  }

  .chart {
    min-height: 100px;
  }

  .data-item {
    padding: 3px;
  }

  .vital-item {
    padding: 3px;
  }

  .body-image-container {
    padding: 6px;
  }
}

@media screen and (max-width: 1280px) and (max-height: 720px) {
  .app-container {
    padding: 5px;
    height: calc(100vh - 75px);
  }

  .main-layout {
    gap: 5px;
  }

  .upper-section {
    height: 68%;
    gap: 5px;
  }

  .lower-section {
    gap: 5px;
  }

  .card {
    padding: 7px;
  }

  .section-title {
    font-size: 13px;
    margin-bottom: 5px;
  }

  .value {
    font-size: 13px;
  }

  .info-grid {
    gap: 3px;
  }

  .data-grid {
    gap: 4px;
  }

  .health-index-grid {
    gap: 4px;
  }

  .vital-info {
    width: 90px;
    gap: 8px;
  }

  .gauge-container {
    padding: 3px;
  }

  .gauge-title {
    font-size: 9px;
  }

  .gauge-track {
    height: 6px;
  }

  .gauge-marker {
    height: 8px;
  }

  .gauge-value {
    font-size: 11px;
  }

  .chart {
    min-height: 90px;
  }

  .data-item {
    padding: 2px;
  }

  .vital-item {
    padding: 2px;
  }

  .body-image-container {
    padding: 5px;
  }
}

/* 针对小屏幕设备的优化 */
@media screen and (max-width: 768px) {
  .app-container {
    padding: 10px 5px;
    height: calc(100vh - 70px);
  }

  .main-layout {
    flex-direction: column;
    gap: 10px;
  }

  .upper-section,
  .lower-section {
    flex: none;
    flex-direction: column;
    gap: 10px;
    height: auto;
  }

  .column {
    flex: none;
    width: 100%;
  }

  .card {
    min-height: auto;
  }

  .full-height-card,
  .full-width-card {
    height: auto;
  }

  .vital-chart-container {
    flex-direction: column;
  }

  .vital-info {
    width: 100%;
    flex-direction: row;
    justify-content: space-around;
    margin-bottom: 15px;
  }

  .health-index-grid {
    grid-template-columns: 1fr;
  }

  .data-grid {
    grid-template-columns: 1fr;
  }

  .body-image-container {
    padding: 10px;
  }
}

/* 1080p 特殊优化 */
@media screen and (min-width: 1920px) and (min-height: 1080px) {
  .app-container {
    padding: 12px;
    height: calc(100vh - 84px);
  }

  .main-layout {
    gap: 10px;
  }

  .upper-section {
    height: 68%;
    gap: 10px;
  }

  .lower-section {
    gap: 10px;
  }

  .card {
    padding: 14px;
  }

  .section-title {
    font-size: 18px;
    margin-bottom: 12px;
  }

  .value {
    font-size: 18px;
  }

  .info-grid {
    gap: 8px;
  }

  .data-grid {
    gap: 10px;
  }

  .health-index-grid {
    gap: 10px;
  }

  .vital-info {
    width: 140px;
    gap: 18px;
  }

  .vital-icon {
    width: 36px;
    height: 36px;
  }

  .gauge-container {
    padding: 8px;
  }

  .gauge-title {
    font-size: 13px;
    margin-bottom: 5px;
  }

  .gauge-track {
    height: 12px;
  }

  .gauge-marker {
    top: -2px;
    height: 16px;
  }

  .gauge-value {
    font-size: 15px;
    margin-top: 3px;
  }

  .gauge-unit {
    font-size: 9px;
  }

  .chart {
    min-height: 140px;
  }

  .data-item {
    padding: 6px;
  }

  .vital-item {
    padding: 6px;
  }

  .index-item {
    padding: 7px 8px;
  }

  .index-item span:first-child {
    font-size: 13px;
  }

  .index-item .value {
    font-size: 17px;
  }

  .body-image-container {
    padding: 12px;
  }
}

/* 确保内容不被遮挡 */
.chart-container,
.vital-chart-container,
.full-width-card {
  overflow: hidden;
}

.chart {
  width: 100%;
  height: 100%;
  max-height: 100%;
}

/* 修复底部被遮挡问题 */
.app-container {
  height: calc(100vh - 84px);
  max-height: calc(100vh - 84px);
}

/* 隐藏滚动条 */
.data-grid,
.vital-signs-grid,
.health-index-grid {
  overflow-y: hidden;
}

/* 新增 - 布局切换按钮样式 */

/* 布局切换按钮样式 */
.app-container {
  position: relative;
}

.layout-switcher {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 5px;
  z-index: 1000;
}

.layout-btn {
  background-color: #102A43;
  color: #FFFFFF;
  border: 1px solid #50784b;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s;
}

.layout-btn:hover {
  background-color: #50784b;
}

.layout-btn.active {
  background-color: #50784b;
  border-color: #50C878;
}

/* 小屏布局 */
.layout-small {
  font-size: 12px;
}

.layout-small .section-title {
  font-size: 14px;
}

.layout-small .value {
  font-size: 14px;
}

.layout-small .gauge-container {
  padding: 6px;
}

.layout-small .gauge-container-small {
  padding: 6px;
}

.layout-small .gauge-title {
  font-size: 10px;
  margin-bottom: 4px;
}

.layout-small .gauge-title-small {
  font-size: 10px;
  margin-bottom: 4px;
}

.layout-small .gauge-labels {
  font-size: 7px;
  margin-bottom: 3px;
}

.layout-small .gauge-labels-small {
  font-size: 7px;
  margin-bottom: 3px;
}

.layout-small .gauge-track {
  height: 16px;
  border-radius: 8px;
}

.layout-small .gauge-track-small {
  height: 16px;
  border-radius: 8px;
}

.layout-small .gauge-value {
  font-size: 12px;
  margin-top: 2px;
}

.layout-small .gauge-value-small {
  font-size: 12px;
  margin-top: 2px;
}

.layout-small .gauge-unit {
  font-size: 8px;
}

.layout-small .gauge-unit-small {
  font-size: 8px;
}

.layout-small .chart {
  min-height: 100px;
}

.layout-small .health-index-grid {
  gap: 8px;
}

.layout-small .index-item {
  padding: 6px 8px;
  font-size: 12px;
}

.layout-small .index-item .value {
  font-size: 14px;
}

.layout-small .health-index-grid .index-item .index-label {
  font-size: 12px !important;
}

/* 中屏布局 */
.layout-medium {
  font-size: 14px;
}

.layout-medium .section-title {
  font-size: 16px;
}

.layout-medium .value {
  font-size: 16px;
}

.layout-medium .gauge-container {
  padding: 8px;
}

.layout-medium .gauge-container-small {
  padding: 8px;
}

.layout-medium .gauge-title {
  font-size: 12px;
  margin-bottom: 6px;
}

.layout-medium .gauge-title-small {
  font-size: 12px;
  margin-bottom: 6px;
}

.layout-medium .gauge-labels {
  font-size: 9px;
  margin-bottom: 4px;
}

.layout-medium .gauge-labels-small {
  font-size: 9px;
  margin-bottom: 4px;
}

.layout-medium .gauge-track {
  height: 20px;
  border-radius: 10px;
}

.layout-medium .gauge-track-small {
  height: 20px;
  border-radius: 10px;
}

.layout-medium .gauge-value {
  font-size: 14px;
  margin-top: 3px;
}

.layout-medium .gauge-value-small {
  font-size: 14px;
  margin-top: 3px;
}

.layout-medium .gauge-unit {
  font-size: 10px;
}

.layout-medium .gauge-unit-small {
  font-size: 10px;
}

.layout-medium .chart {
  min-height: 120px;
}

.layout-medium .health-index-grid {
  gap: 10px;
}

.layout-medium .index-item {
  padding: 8px 10px;
  font-size: 13px;
}

.layout-medium .index-item .value {
  font-size: 16px;
}

.layout-medium .health-index-grid .index-item .index-label {
  font-size: 13px !important;
}

/* 大屏布局 - 优化显示效果 */
.layout-large {
  font-size: 16px;
  padding: 15px;
}

.layout-large .main-layout {
  gap: 15px;
}

.layout-large .upper-section {
  gap: 15px;
}

.layout-large .card {
  padding: 20px;
  border-radius: 12px;
  background-color: rgba(16, 42, 67, 0.95);
}

.layout-large .section-title {
  font-size: 20px;
  margin-bottom: 15px;
  color: #50C878;
  letter-spacing: 1px;
}

.layout-large .value {
  font-size: 22px;
  color: #69A2B0;
  font-weight: bold;
}

.layout-large .unit {
  font-size: 14px;
}

.layout-large .info-grid {
  gap: 10px;
  margin-top: 10px;
}

.layout-large .data-grid {
  gap: 15px;
}

.layout-large .health-index-grid {
  gap: 12px;
}

.layout-large .index-item {
  padding: 10px 12px;
  font-size: 14px;
}

.layout-large .index-item .value {
  font-size: 20px;
}

.layout-large .health-index-grid .index-item .index-label {
  font-size: 14px !important;
}

.layout-large .vital-info {
  width: 150px;
  gap: 20px;
}

.layout-large .vital-icon {
  width: 40px;
  height: 40px;
}

/* 大屏的仪表盘样式优化 */
.layout-large .gauge-container {
  padding: 12px;
}

.layout-large .gauge-title {
  font-size: 16px;
  margin-bottom: 8px;
  font-weight: bold;
}

.layout-large .gauge-wrapper {
  margin-bottom: 8px;
}

.layout-large .gauge-labels {
  font-size: 12px;
  margin-bottom: 4px;
}

.layout-large .gauge-track {
  height: 30px;
  border-radius: 15px;
}

.layout-large .gauge-marker {
  top: -8px;
  width: 5px;
  height: 46px;
  background-color: #FFFFFF;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.layout-large .gauge-value {
  font-size: 24px;
  margin-top: 5px;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(105, 162, 176, 0.5);
}

.layout-large .gauge-unit {
  font-size: 12px;
  margin-top: 2px;
}

/* 大屏的小仪表盘样式 */
.layout-large .gauge-container-small {
  padding: 8px;
}

.layout-large .gauge-title-small {
  font-size: 14px;
  margin-bottom: 4px;
}

.layout-large .gauge-labels-small {
  font-size: 12px;
  margin-bottom: 4px;
}

.layout-large .gauge-track-small {
  height: 30px;
  border-radius: 15px;
}

.layout-large .gauge-marker-small {
  top: -4px;
  width: 4px;
  height: 28px;
  background-color: #FFFFFF;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

.layout-large .gauge-value-small {
  font-size: 18px;
  margin-top: 3px;
  font-weight: bold;
}

.layout-large .gauge-unit-small {
  font-size: 10px;
}

.layout-large .chart {
  min-height: 200px;
}

/* 人体图示优化 */
.layout-large .body-image-container {
  padding: 20px;
  border-radius: 8px;
}

.layout-large .body-image {
  max-width: 100%;
  max-height: 100%;
  transition: transform 0.3s;
}

.layout-large .body-image:hover {
  transform: scale(1.02);
}

/* 生命体征图表容器优化 */
.layout-large .vital-chart-container {
  padding: 15px;
  border-radius: 8px;
}

/* 针对非常大的屏幕的额外调整 */
@media screen and (min-width: 2560px) {
  .layout-large {
    padding: 20px;
  }

  .layout-large .card {
    padding: 25px;
  }

  .layout-large .section-title {
    font-size: 24px;
  }

  .layout-large .value {
    font-size: 28px;
  }

  .layout-large .gauge-title {
    font-size: 18px;
  }

  .layout-large .gauge-track {
    height: 40px;
    border-radius: 20px;
  }

  .layout-large .gauge-track-small {
    height: 40px;
    border-radius: 20px;
  }

  .layout-large .gauge-marker {
    top: -10px;
    width: 6px;
    height: 60px;
  }

  .layout-large .gauge-marker-small {
    top: -6px;
    width: 5px;
    height: 38px;
  }

  .layout-large .gauge-value {
    font-size: 30px;
  }

  .layout-large .chart {
    min-height: 250px;
  }
}
</style>
